<template>
    <div id="delite">
        <div id="header">
			<!-- <p class="back">&lt;</p> -->
			<!-- <i class="iconfont icon-arrow-left book" @click="back()"></i>
             -->
             <div class='gobackpage' @click='gobackpage()'>
                <i class='iconfont icon-jiankuohaocudazuo'></i>
            </div>
			<div class="merchant">
				<img :src="headinf.image_path" alt="" />
				<div class="message">
					<h3>{{headinf.name}}</h3>
				<div class="appraise">
					<div>
					<!-- <span>{{headinf.delivery_mode.text}}/</span> -->
					<span>{{headinf.order_lead_time}}分钟送达/</span>
					<span>{{headinf.tips}}</span>
					</div>
					<!-- <span class="appraise_1">&gt;</span> -->
					<i class="iconfont icon-arrow-right book"></i>
				</div>
				<div class="board">
					<span>公告：</span>
					<span>{{headinf.promotion_info}}</span>
				</div>
				</div>
			</div>
			<div class="activity">
				<span>满22减11,满45减15,满70减20</span>
				<span>2个活动</span>
			</div>
		</div>
		
		<!--上面是header-->
        <div>
            <div class="tab">
                    <router-link to="/detail/commodity">商品</router-link>
                    <router-link to="/detail/appraise">评价</router-link>
            </div>
            <router-view></router-view>
		</div>	
    </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'delite',
  data(){
    return {
      headinf: {},
      id:'',

    }
  },
  mounted: function(){
    var that = this;
    var a = window.location.href.match(/\d{6,9}/)[0];
    // this.id = a;
    this.$store.state.id = a;
    // console.log(this.$store.state.id);
    axios.get('http://localhost:3000/detail', {
        params:{
            latitude:that.$store.state.latitude,
            longitude:that.$store.state.longitude,
            id:a
        }
    }).then(function(res) {

        // console.log(res);
        if(res){
            // that.headinf = res.data;
            // that.headinf.image_path = 'https://fuss10.elemecdn.com/' + that.headinf.image_path + '.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/'
            // console.log(that.headinf);
            var arr = res.data;
            // arr.push(res.data);
            // console.log(arr);
            // arr.map(function(item,index){

                var a = arr.image_path.split('');
            //     // console.log(a);
                a.splice(1,0,'/');
                a.splice(4,0,'/');
                if(a.join('').indexOf('jpeg')!=-1){
                    arr.image_path = 'https://fuss10.elemecdn.com/'+a.join('')+'.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
                }else{
                    arr.image_path = 'https://fuss10.elemecdn.com/'+a.join('')+'.png?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
                }
            // })
            var tips = arr.piecewise_agent_fee.tips;
            arr.tips = tips;
            that.headinf = arr;
            // console.log(arr)
        }
    }).catch(function(err) {
      console.log(err);
    })
  },
  methods: {
    gobackpage(){
      history.go(-1);
    }
  }
}
</script>
<style scoped lang="scss">
@import '../../static/hotcss/px2rem.scss';
#header{
	width:100%;
    height:px2rem(261);
    background-color: rgba(119,103,137,43);
    color:#fff;
	position: fixed;
	top:0;
	left:0;
    .icon-arrow-left:before{
        height:px2rem(71);
        font-size: px2rem(49);
        color:#fff;
        padding:0 px2rem(20);
    }
    .gobackpage{
        height: px2rem(71);
        box-sizing: border-box;
        padding: px2rem(8) px2rem(20);
        .iconfont{
            font-size: px2rem(50);
            color: #FFF;
            font-weight: normal;
        }
    }
    .merchant{
		margin-top: px2rem(10);
        display: flex;
        height:px2rem(129);
//      padding:0 px2rem(20);
        
        img{
           height:px2rem(129); 
           width:px2rem(129);
           margin:0 px2rem(20);  
        }
        .message{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h3{
                font-size: px2rem(36);
            }
            .appraise{
                font-size: px2rem(22);
                display: flex;
                justify-content: space-between;    
                .icon-arrow-right:before{
                    font-size:px2rem(30);
                    
                }
            }
            .board{
                width:px2rem(570);
                font-size: px2rem(22);
                white-space:nowrap;
                overflow: hidden;
                text-overflow:ellipsis;
            }  
        }
    }
    .activity{
        display: flex;
        justify-content: space-between;
        font-size: px2rem(20);
        margin:0 px2rem(20); 
        margin-top:px2rem(20);
    }
}


.tab{
	position: fixed;
	top:px2rem(260);
    height:px2rem(91);
    color:#000;
    display: flex;
    border-bottom: 1px solid #ccc;
   a{
        display: block;
        outline: none;
        width:px2rem(375);
        background:#fff;
        border:none;
        font-size: px2rem(34);
        color:#000;
        text-align: center;
        line-height:px2rem(91);
    }
}



</style>
